<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";

const userStore = useUserStore();
const date: Date = new Date();
const duration = 5000;
</script>

<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="5" class="mt-1">
      <el-col :span="18">
        <el-row :gutter="5">
          <!--用户数-->
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card shadow="never">
              <svg-icon icon-class="users" />当前用户 1003人<br />累计用户：
              1003.5万
              <div class="flex items-center justify-between">
                <div>
                  环比增长：13%
                  <svg-icon
                    class="border border-rounded-50"
                    icon-class="upArrow"
                    size="1em"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
          <!--充电时长-->
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card shadow="never">
              <svg-icon icon-class="chatou_plug" />充电时长 17.6万小时<br />累计时长：
              523.5万小时
              <div class="flex items-center justify-between">
                <div>
                  环比增长：13%
                  <svg-icon
                    class="border border-rounded-50"
                    icon-class="upArrow"
                    size="1em"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
          <!--告警次数-->
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card shadow="never">
              <svg-icon icon-class="jinggao" />告警次数 13次<br />累计告警：
              1024次
              <div class="flex items-center justify-between">
                <div>
                  环比下降：13%
                  <svg-icon
                    class="border border-rounded-50"
                    icon-class="downArrow"
                    size="1em"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
          <!--充电桩数-->
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card shadow="never">
              <svg-icon icon-class="chongdianzhuang" />充电桩个数 256个<br />累计用户：30459个
              <div class="flex items-center justify-between">
                <div>
                  环比增长：13%
                  <svg-icon
                    class="border border-rounded-50"
                    icon-class="upArrow"
                    size="1em"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="mt-1">
          <el-col>
            <el-row>
              <el-col>
                <HeatMap> </HeatMap>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <!-- 热门充电城市 -->
          <el-col>
            <FouChart
              id="fouChart"
              height="58vh"
              width="100%"
              class="bg-[var(--el-bg-color-overlay)]"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- Echarts 图表 -->
    <el-row :gutter="5" class="mt-1">
      <el-col :sm="24" :lg="6" class="mb-2">
        <FirChart
          id="firChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
        <SecChart
          id="secChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
        <ThiChart
          id="thiChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
      <!--充电桩分类-->
      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
        <TypeChart
          id="typeChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        ></TypeChart>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 2px 2px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }
}
</style>
